<template>
	<div style="max-width: 750px;
    margin: 0 auto;
    width: 100%;
    height: 100%;">
		<!-- 头部 -->
		<header v-if="$utils.test.isEmpty(customHead)">
			<div class="header-box">
				<div class="header-back" @click="goback">
					<span class="back-img"><img src="../../assets/images/back.png" alt=""/></span>
				</div>
				<div class="header-search">
					<p class="ser-txt">{{ nameTile }}</p>
				</div>
				<div class="header-mes"><HeadSelect></HeadSelect></div>
			</div>
		</header>
		<!-- /头部 -->
		<header v-else>
			<div class="header-box" :style="{background: themes.color}">
			    <div class="header-back" @click="goback">
					
					<span class="back-img"><i class="arrow-left" :style="{color: customHead.fontColor? customHead.fontColor: '#000'}"></i></span>
			    </div>
			    <div class="header-search">
			        <p class="ser-txt" :style="{color: customHead.fontColor? customHead.fontColor: '#000'}">{{ $route.meta.title }}</p>
			    </div>
			    <div class="header-mes"></div>
			</div>
		</header>
	</div>
</template>

<script>
import HeadSelect from 'components/headBox/headSelect';
import { mapState } from 'vuex'
export default {
	components: { HeadSelect },
	props: {
		titleName: String,
		customHead: Object
	},
	watch: {
		$route: {
			handler: function(val, oldVal){
				setTimeout(() => {
					this.nameTile = val.meta.title
				})
			},
			// 深度观察监听
			deep: true
		},
	},
	computed: {
		...mapState(['themes'])
	},
	data () {
		return {
			nameTile: ''
		}
	},
	mounted() {
	},
	methods: {
		//返回
		goback() {
			this.$router.back();
			this.$router.isBack = true;
		}
	}
};
</script>

<style src="../../assets/css/common.css" scoped></style>
